<template>
  <view>
    <view class="header">
      <navigator open-type="navigateBack" class="close">
        <image
          src="../../../static/clos.png"
          mode="widthFix"
          style="width: 31rpx"
        ></image>
      </navigator>
      <view class="">绑定手机号</view>
    </view>
    <view class="shuru">
      <input
        type="number"
        value=""
        class="phone"
        v-model="mobile"
        maxlength="11"
        placeholder="请输入您的手机号码"
      />
      <view class="authCode">
        <input
          type="number"
          v-model="captcha"
          placeholder="验证码"
          value=""
          class="authInp"
        />
        <view class="authBtn">
          <text v-if="verifyshow" @click="authClcik">获取验证码</text>
          <text v-else>{{ second }}s</text>
        </view>
      </view>
    </view>
    <button type="default" class="btn" @click="confirm">绑定</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verifyshow: true,
      mobile: "", // 手机号码
      captcha: "", // 短信验证码
      payPassword: "", // 新密码
      Confirmpassword: "", // 确认密码
      token: "",
      second: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
    // this.mobile = uni.getStorageSync("mobile");
  },
  methods: {
    //获取验证码
    async authClcik() {
      let mobile = this.mobile;
      let that = this;
      if (!RegExp(/^1[34578]\d{9}$/).test(that.mobile)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "正在发送",
        });
        that.second = 60;

        const { data } = await that.$myRequest({
          url: "sms/get_captcha",
          method: "POST",
          data: {
            mobile: mobile,
            event: "bindMobile",
          },
        });

        if (data.code == 1) {
          uni.hideLoading();
          that.timedown(that.second);
        } else {
          uni.hideLoading();
          uni.showToast({
            icon: "none",
            title: data.msg,
          });
        }
      }
    },
    // 验证码倒计时
    timedown(num) {
      let that = this;
      if (num == 0) {
        that.verifyshow = true;
      } else {
        that.verifyshow = false;
        setTimeout(() => {
          that.second--;
          that.timedown(that.second);
        }, 1000);
      }
    },
    // 确认
    async confirm() {
      if (this.mobile == "") {
        uni.showToast({
          title: "手机号码不能为空",
          icon: "none",
        });
        return;
      }
      if (this.captcha == "") {
        uni.showToast({
          title: "验证码不能为空",
          icon: "none",
        });
        return;
      }

      const res = await this.$myRequest({
        url: "user/bindMobile",
        method: "POST",
        data: {
          mobile: this.mobile,
          captcha: this.captcha,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: "绑定成功",
        });
        uni.setStorageSync("mobile", this.mobile);
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1500);
      }
    },
  },
};
</script>

<style lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35rpx;
  color: #333333;
  padding-top: 80rpx;
  font-weight: 600;
  box-sizing: border-box;
  .close {
    position: absolute;
    left: 60rpx;
  }
}
.yanzheng {
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: #666666;
  padding-top: 69rpx;
}
.shuru {
  padding: 60rpx 50rpx 45rpx 50rpx;

  .phone {
    font-size: 28rpx;
    width: 620rpx;
    height: 77rpx;
    background-color: #eeeeee;
    border-radius: 15rpx;
    padding-left: 30rpx;
    margin-top: 45rpx;
  }
  .sendout {
    background-color: #333333;
    height: 77rpx;
    width: 200rpx;
    margin-top: 42rpx;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 0 17rpx 17rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.btn {
  width: 650rpx;
  height: 77rpx;
  background-color: #c52b2e;
  line-height: 77rpx;
  color: #ffffff;
  border-radius: 15rpx;
}
.authCode {
  display: flex;
  width: 650rpx;
  height: 77rpx;
  background-color: #eee;
  border-radius: 18rpx;
  padding-left: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  margin: 40rpx auto 0;

  .authInp {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
  }

  .authBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #2cb2d6;
    letter-spacing: 2rpx;
  }
}
</style>
